<template>
  <div>
    <video style="width: 100%;height: 100%;" :ref="name" controls></video>
  </div>
</template>

<script>
import Hls from 'hls.js';

export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.isData()
  },
  watch: {
    // 根据名称筛选组织树
    src(newVal, oldVal) {
      this.src = newVal;
      this.isData()
    }
  },
  created() {
    console.log(this.src, '1111111');
  },
  methods: {
    isData() {
      const video = this.$refs[this.name];
      if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(this.src);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegURL')) {
        video.src = this.src;
        video.addEventListener('loadedmetadata', () => {
          video.play();
        });
      }
    }
  }
};
</script>
